<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="true">
        <template #before>
          一共 {{ page.total }}条数据
        </template>
        <template #after>
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="Export2Excel">导出</el-button>
          <el-button size="small" type="primary" @click="showDialog=true">新增员工</el-button>
        </template>
      </PageTools>
      <el-card>

        <el-table v-loading="loading" border :data="employeeList">
          <el-table-column label="序号" sortable="">
            <template #default="{$index}">
              {{ (page.page-1)*page.size+ ($index+1) }}
            </template>
          </el-table-column>
          <el-table-column label="头像" sortable="">
            <template #default="{row}">
              <img v-imgerr="require('@/assets/common/head.jpg')" :src="row.staffPhoto" class="avatar" @click=" showQrCode(row.staffPhoto)">
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column
            label="聘用形式"
            :formatter="formOfEmployment"
            prop="formOfEmployment"
            sortable=""
          />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{row}">
              {{ row.timeOfEntry |formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template #default="{row}">
              <el-switch :value="row.enableState===1" />

            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small" @click="roles(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            :page-sizes="[2,5,10,20]"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </el-row>
        <addemployees :show-dialog="showDialog" @showDialog1="showDialog1" />
      </el-card>
    </div>
    <el-dialog title="二维码" :visible="showqrcode" @close="shutDown">
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <role ref="ids" :show-dialog.sync="showrole" :userid="userID" />
  </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '@/api/employees'
import employees from '@/api/constant/employees'
import addemployees from './components/add-employees'
import QrCode from 'qrcode'
import role from './components/role.vue'
export default {
  components: { addemployees, role },
  data() {
    return {
      userID: '',
      showrole: false,
      showqrcode: false,
      loading: false,
      employeeList: [],
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      showDialog: false
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    showDialog1(data) {
      this.showDialog = data
    },
    async getEmployeeList() {
      this.loading = true
      const { rows, total } = await getEmployeeList(this.page)
      this.employeeList = rows
      this.page.total = total
      // console.log(this.employeeList)
      this.loading = false
    },
    currentChange(newPage) {
      this.page.page = newPage
      this.getEmployeeList()
    },
    sizeChange(newSize) {
      this.page.size = newSize
      this.getEmployeeList()
    },
    formOfEmployment(row, col, cellVaule) {
      const obj = employees.hireType.find(item => item.id === +cellVaule)
      return obj ? obj.value : '未知岗位'
    },
    async Export2Excel() {
      const { export_json_to_excel } = await import ('@/vendor/Export2Excel')
      const { rows } = await getEmployeeList({ page: 1, size: 10 })
      const dict = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber'
      }
      const header = Object.keys(dict)
      const data = rows.map(user => {
        return this.obj2(user, dict)
      })
      export_json_to_excel({
        header, data
      })
    },
    obj2(user, dick) {
      const newdata = []
      for (const key in dick) {
        const emkey = dick[key]
        const value = user[emkey]
        console.log(user)
        newdata.push(value)
      }
      return newdata
    },
    async  delel(id) {
      await delEmployee(id)
      await this.$confirm('确定删除该员工吗')
      this.$message('删除成功')
      if (this.employeeList.length === 1 && this.page.page > 1) {
        this.page.page--
      }
      this.getEmployeeList()
    },
    // 点击头像显示二维码
    showQrCode(url) {
      if (url) {
        this.showqrcode = true
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.myCanvas, url)
        })
      }
    },
    roles(id) {
      this.userID = id
      this.showrole = true
      this.$refs.ids.getUserDetailById(id)
    },
    // 关闭二维码
    shutDown() {
      this.showqrcode = false
    }
  }
}
</script>

<style lang="scss">
.avatar{
  height: 130px;
  width: 90%;
  object-fit: contain;
}
</style>
